<template>
  <div class="pr">
    <div class="cover-box" @click.stop="$parent.$parent.onEditer(index)" />
    <div class="drag-optional" :class="{selected:index === selectedIndex}">
      <div class="diy-video" :style="{padding:item.style.paddingTop + 'px 0'}">
        <video
          :style="{height:item.style.height + 'px'}"
          :src="item.params.videoUrl"
          :poster="item.params.poster"
          :autoplay="item.params.autoplay === 1"
          controls
        >
          您的浏览器不支持 video 标签
        </video>
      </div>
      <div class="btn-edit-del">
        <div class="btn-del" @click.stop="$parent.$parent.onDeleleItem(index)">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['item', 'index', 'selectedIndex'],
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style>
.diy-video video{ display: block; width: 100%;}
.cover-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;}
</style>
